<template>
  <div class="about-view">
    <!-- 页面标题 -->
    <div class="header">
      <h1 class="title">关于我们</h1>
      <div class="subtitle">了解我们的故事与使命</div>
    </div>

    <!-- 主要内容区域 -->
    <main class="content">
      <section class="mission-section">
        <h2 class="section-title">我们的使命</h2>
        <p class="section-text">
          我们致力于通过创新的技术解决方案，让数字世界更加人性化、高效和可持续。
          自2015年成立以来，我们已帮助超过500家企业实现数字化转型。
        </p>
      </section>

      <section class="team-section">
        <h2 class="section-title">核心团队</h2>
        <div class="team-grid">
          <div v-for="member in teamMembers" :key="member.id" class="team-card">
            <div class="avatar-wrapper">
              <img :src="member.avatar" :alt="member.name" class="avatar" />
            </div>
            <div class="member-info">
              <h3 class="name">{{ member.name }}</h3>
              <p class="position">{{ member.position }}</p>
              <div class="social-links">
                <a v-if="member.linkedin" :href="member.linkedin" target="_blank">
                  <i class="icon-linkedin"></i>
                </a>
                <a v-if="member.twitter" :href="member.twitter" target="_blank">
                  <i class="icon-twitter"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="stats-section">
        <h2 class="section-title">数据看板</h2>
        <div class="stats-grid">
          <div v-for="stat in statsData" :key="stat.id" class="stat-card">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </section>
    </main>

    <!-- 联系信息 -->
    <footer class="contact-footer">
      <h3 class="contact-title">联系我们</h3>
      <div class="contact-info">
        <p><i class="icon-email"></i> contact@example.com</p>
        <p><i class="icon-phone"></i> +86 123 4567 8910</p>
        <p><i class="icon-location"></i> 北京市海淀区科技园区88号</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 团队数据
const teamMembers = ref([
  {
    id: 1,
    name: '张明',
    position: '创始人 & CEO',
    avatar: '/images/avatars/avatar1.jpg',
    linkedin: 'https://linkedin.com/in/zhangming',
    twitter: 'https://twitter.com/zhangming'
  },
  {
    id: 2,
    name: '李华',
    position: '技术总监',
    avatar: '/images/avatars/avatar2.jpg',
    linkedin: 'https://linkedin.com/in/lihua'
  },
  {
    id: 3,
    name: '王芳',
    position: '产品经理',
    avatar: '/images/avatars/avatar3.jpg',
    twitter: 'https://twitter.com/wangfang'
  },
  {
    id: 4,
    name: '陈伟',
    position: '首席设计师',
    avatar: '/images/avatars/avatar4.jpg',
    linkedin: 'https://linkedin.com/in/chenwei'
  }
]);

// 统计数据
const statsData = ref([
  { id: 1, value: '8年', label: '行业经验' },
  { id: 2, value: '500+', label: '服务客户' },
  { id: 3, value: '98%', label: '客户满意度' },
  { id: 4, value: '50+', label: '团队成员' }
]);
</script>

<style scoped>
.about-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
}

.title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.content {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.8rem;
  color: #34495e;
  border-bottom: 2px solid #42b983;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.section-text {
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.team-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.team-card:hover {
  transform: translateY(-5px);
}

.avatar-wrapper {
  height: 200px;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .avatar {
  transform: scale(1.05);
}

.member-info {
  padding: 1.2rem;
  text-align: center;
}

.name {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  color: #2c3e50;
}

.position {
  color: #7f8c8d;
  margin-bottom: 0.8rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-links a {
  color: #42b983;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #3498db;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat-card {
  background: linear-gradient(135deg, #42b983, #3498db);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
}

.contact-footer {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

.contact-title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.contact-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  color: #555;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
}
</style>